<template>
    <div>
        <w-button type="primary">按钮</w-button>
        <w-button type="danger">按钮</w-button>
        <w-button type="success">按钮</w-button>
        <w-button type="warning">按钮</w-button>
        <w-button type="info">按钮</w-button>
        <w-button type="default">按钮</w-button>
        <br> <br>
        <w-button round>圆角按钮</w-button>
        <br> <br>
        <w-button loading></w-button>
        <br> <br>
        <w-button icon="w-icon-picture"></w-button>
        <w-button icon="w-icon-loading" type="success" round>按钮</w-button>
        <br> <br>
        <w-button :loading="isLoading" @click="buttonClick">按钮</w-button>
    </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
    setup() {
        const isLoading = ref(true);
        const buttonClick = () => {
            console.log('button-click');
        }
        setTimeout(() => {
            isLoading.value = false;
        }, 3000)

        return {
            buttonClick,
            isLoading
        }
    }
})
</script>